 var hlimgs = {
    "list":[
        {"name":"Apple iPhone5","img":["images/products/apple_iphone_5.png","images/products/iphone5_1.png","images/products/iphone5_2.png"]},
        {"name":"Samsung Galaxy SIII","img":["images/products/samsung_galaxy_s3.png","images/products/samsung_galaxy_s3_1.png","images/products/samsung_galaxy_s3_2.png"]},
        {"name":"Amazon Kindle Fire","img":["images/products/amazon_kindleFire.png","images/products/amazon_kindleFire_1.png","images/products/amazon_kindleFire_2.png"]},
        {"name":"Apple Macbook Pro","img":["images/products/apple_macbook_pro.png","images/products/apple_macbook_pro_1.png","images/products/apple_macbook_pro_2.png"]},
    ],
 };
 function loadSlides($index){
    $slide = $("#slides");
    $menu = $(".dot-nav ul");
    $slide.empty();
    $menu.empty();
    $.each(hlimgs.list[$index].img,function(index,value){
        $slide.append('<div class="slide"><img src= ' + value+ ' width="830" height="400" /></div>');
        $start = '';
        if(index == 0) $start = ' act';
        $menu.append('<li class="menuItem"><a href="" class="slidelink'  +$start+'"></a></li>');
    });  
 }
 $(document).ready(function(){   
    loadSlides(0);
    
    $('.hitems').click(function(){
        $index = $(this).index('.hitems');
        loadSlides($index);
        $('#slides').css({'marginLeft':'0px'});
    });
    
    var totWidth=0;
    var positions = new Array();

    $('#slides .slide').each(function(i){
        positions[i]= totWidth;
        totWidth += $(this).width();
    });
 
    $('#slides').width(totWidth);
  
    $('.slidelink').live("click",function(e){
        $('.act').removeClass('act');
        $(this).addClass('act');
	 
        var pos = $(this).parent().prevAll('.menuItem').length;
	 
        $('#slides').stop().animate({marginLeft:-positions[pos]+'px'},450);	 
        e.preventDefault();
    });
 
    //$('dot-nav ul li.menuItem:first').addClass('act').siblings().removeClass('act');
 });